import React, { useEffect, useState } from 'react'
import { Button, Checkbox, Form, Input, InputNumber, Select, Space  } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

type Props = {
    getSeaData: any
    resetting:any
}

const ShopSearch = (props: Props) => {
    const [isIdCard, setIsIdCard] = useState(false)
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isWidth, setIsWidth] = useState('30%')
    const [isTitle, setIsTitle] = useState('展开')
    const [less,setLess] = useState()
    const [more,setMore] = useState()

    useEffect(() => {
    }, [])

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };

    const onFinish = (values: any) => {
        console.log('Success:', values);
        const data = {
            shopName:values.shopName,
            status:values.status,
            less:less,
            more:more
        }
        props.getSeaData(data)
    };

    //重置
    const  resetBtn =() => {
        props.resetting()
    }

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    //控制展开收缩
    const domBtn = () => {
        if (isIdCard) {
            setIsIdCard(false)
            setIsWidth('30%')
            setIsTitle('展开')
        } else {
            setIsIdCard(true)
            setIsWidth('40%')
            setIsTitle('收缩')
        }
    }

    //修改最小范围
    const setLessBtn = (val:any)=>{
        // console.log(e);
        setLess(val)
    }

     //修改最大范围
     const setMoreBtn = (val:any)=>{
        setMore(val)
     }


    return (
        <div>
            <Form
                name="basic"
                style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', margin: '0 50px' }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >

                <Form.Item
                    label="商铺名称"
                    name="shopName"
                    style={{ width: isWidth }}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="商铺状态"
                    name="status"
                    style={{ width: isWidth }}
                >
                    <Select
                        style={{ width: 120 }}
                        onChange={handleChange}
                        options={[
                            { value: '', label: '展示所有数据' },
                            { value: '1', label: '启用' },
                            { value: '2', label: '停用' },
                        ]}
                    />
                </Form.Item>

                {
                    isIdCard ? 
                    <Form.Item
                        label="信誉值"
                        name="prestige"
                        style={{ width: '30%' }}
                    >
                        <InputNumber onChange={setLessBtn} value={less}/> 
                        ~ 
                        <InputNumber onChange={setMoreBtn} value={more}/>
                    </Form.Item> : null
                }


                <Form.Item style={{ width: '220px' }}>
                    <Button type="primary" htmlType="submit" style={{ marginRight: '10px' }}>
                        查询
                    </Button>
                    <Button htmlType="button" style={{ marginRight: '20px' }} onClick={resetBtn}>
                        重置
                    </Button>
                    <a href="#" onClick={domBtn}>{isIdCard ? <UpOutlined /> : <DownOutlined />}   {isTitle}</a>
                </Form.Item>
            </Form>
        </div>
    )
}

export default ShopSearch